<template>
    <div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-header-tabs" style="text-align: center;font-size: xx-large">
                                欢迎使用XX系统
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="inputs">
                                <p><input v-model="userName" placeholder="用户名" type="text" class="form-control"></p>
                                <p><input v-model="passWord" placeholder="密码" type="password" class="form-control"></p>
                                <p><a @click="login" class="btn btn-primary" style="width: 100%;">登录</a></p>
                                <p><a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#myModal" style="width: 100%;">注册</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">用户注册</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <p>请设置用户名：<input v-model="myUserName" placeholder="输入你的名称" type="text" class="form-control"></p>
                        <p>请设置密码：<input v-model="myPassWord" placeholder="设置密码" type="password" class="form-control"></p>
                        <p>确认密码：<input v-model="myPassWordConfirm" placeholder="确认密码" type="password" class="form-control"></p>
                        <div>所在学校：
                            <Web_fill_input data-u-r-l="https://kbtxwer.gitee.io/blog2/maogeshijue/json_utf8" @valueChanged="valueChange"></Web_fill_input>
                        </div>
                        <p v-if="myPassWord!=myPassWordConfirm&&myPassWordConfirm!=''" style="color: red">警告：两次输入的密码不相同</p>
                        <p v-else style="color: green">账号经过管理员审核方可使用</p>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" @click="register" class="btn btn-primary" data-dismiss="modal">立即注册</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>


    </div>
</template>

<script>

    import axios from "axios"
    import Web_fill_input from "./myUtil/Web_fill_input";
    const options = {
        headers: { 'token': 'my_token_is_not_set_yet' },
    }
    var netReq = axios.create(options)

    export default {
        name: "Login",
        components:{
          Web_fill_input
        },
        data(){
            return {
                userName:'',
                passWord:'',
                myUserName:'',
                myPassWord:'',
                myPassWordConfirm:'',
                schoolName:'',
            }
        },
        methods:{

            valueChange(value,value2){
                this.schoolName = value
                console.log(value + value2)
            },

            login(){
                if(localStorage.getItem("myToken")!=undefined){
                    alert("检测到您的token，为您快速登录")
                    return
                }
                alert(this.userName +'\n'+ this.passWord)
                let that = this;
                let postData = {
                    userName:this.userName,
                    passWord:this.passWord
                }
                netReq.post("/api/my",postData).then(
                    localStorage.setItem("myToken","is_Login")
                )
                return true;
            },
            register(){
                if(this.myPassWord===this.myPassWordConfirm){
                    alert("两次密码相同，开始请求注册")
                }else {
                    alert("请确保两次输入的密码相同")
                }
            },

        },

    }
</script>

<style scoped>

</style>